@import "./common/reset.less";
@import "./common/mixins.less";

@import "./parts/current-handle.less";

@import "./parts/slot.less";
@import "./parts/x-input.less";

body{
    width: 100%;
    height: 100%;
	position: absolute;
	background: @secondary-color;
	overflow: hidden;
}

#app-root{
	position: relative;
	z-index: 1;
	height:100%;
}
.@{clsPrefix}boundary{
	height: 100%;
	display: flex;
	flex-direction: column;
}
.@{clsPrefix}paper{
	height: 100%;
	position: relative;
	padding: 6px;
	overflow-y: auto;
	.scrollBeautify();
	box-sizing: border-box;
}
.panel{
	font-family:Microsoft Yahei;
	box-shadow:0px 0px 20px 5px rgba(56, 58, 60, 0.15);
	width:300px;
	// position:absolute;
	overflow:hidden;
	z-index:10000;
	border-radius:8px;
	.x-icon-btn{
		width: 17px;
		overflow: hidden;
		input{
            position: absolute;
			opacity: 0;
			cursor: pointer;
		}
		.fa{
			position: relative;
			z-index: 1;
		}
	}
	.flexCtn{
		.flexCtn();
		align-items: center;
	}
	.iconButton{
		width:24px;
		margin-left: 5px;
		font-size: 17px;
		color: #98a7a3;
		svg{
			color: #98a7a3;
		}
	}
	.v-top{
		vertical-align: top;
	}
	ul{
		margin:0;
		list-style:none;
		padding:0;
	}
	.panel-hd{
		text-indent:8px;
		background: @base-color;
		margin:0;
		line-height:28px;
		height:28px;
		// color:#555;
		&:hover {
			cursor:move;
		}
	}
	.panel-value{
		border:1px solid #bfbfbf;
		width:116px;
		border-radius:3px;
		text-indent:3px;
		height:18px;
		line-height:18px;
	}
	input[type="text"],textarea{
		border-radius: 3px;
		width: 100%;
		box-sizing: border-box;
		padding: 2px 4px;
		font-size: 13px;
		background: #98a7a3;
		border:none;
		&:focus{
			background: #c9d0ce;
			outline: none;
		}
	}
	.inp-wrapper{
		overflow: hidden;
		position: relative;
		&:nth-child(1){
			flex: 4
		}
		&:nth-child(3){
			flex: 5
		}
		.unit{
			color: #353a39;
			position: absolute;
			top: 0;
			right:5px;
			font-size: 12px;
			line-height: 18px;
		}
	}
	.list-wrap{
		min-height: 22px;
		.colon{
			padding: 0 3px;
			font-style: normal;
			color:#aec5c0;
			font-weight: bold;
			font-size: 16px;
		}
		>li{
			margin-top:5px;
			&:first-child{
				margin-top: 0;
			}
			.flexCtn();
		}
	}
	.panel-bd{
		border-top:0;
		background:#fff;
		padding:10px;
		min-height: 22px;
	}
	label{
		margin-right:5px;
		min-width:50px;
		display:inline-block;
		vertical-align: top;
	}
	button{
		line-height:28px;
		padding:0;
		border:none;
		display:inline-block;
		border-radius:5px;
		cursor:pointer;
		font-family:Microsoft Yahei;
		padding:0 10px;
	}
	.btn-max{
		width:100%;
		line-height:28px;
	}
	.btn-A{
		line-height:22px;
		border-radius:3px;
	}
}
.ReactModalPortal{
	position: relative;
	z-index: 2;
	.ReactModal__Overlay{
		background-color: rgba(127,255,212,0.75) !important;
		// opacity: 0;
		// transition: opacity 2000ms ease-in-out;
		
	}
	.ReactModal__Content{
		right: auto !important;
		bottom: auto !important;
		left: 50% !important;
		top: 50% !important;
		position: fixed;
		transform: translate(-50%, -50%);
	}
}
.t-input-small{
	&.wid-max{
		width: 100%;
	}
	label{
		transform: translate(14px, 14px) scale(1)
	}
	input{
		padding: 12px 14px;
	}
}
.@{clsPrefix}menu-bar{
	background: @base-color;
	padding: 5px  20px;
	border-bottom: 3px solid #6b807d;
	.@{clsPrefix}info{
		color:#7b908c;
		float:right;
		font-size: 14px;
		float: right;
		line-height: 26px;
	}
	.panel-mode{
		display: inline-block;
		margin-right: 20px;
	}
	.menu-item{
		background:#bfbfbf;
		height:26px;
		line-height:26px;
		text-align:center;
		border-radius:5px;
		margin-right:15px;
		padding: 0 8px;
		cursor: pointer;
		width:auto;
		&.active{
			background:#42a093;
			color: #fff;
		}
	}
}
.@{clsPrefix}layout-space{
	position: relative;
	flex:1;
	display: flex;
	overflow: hidden;
	.@{clsPrefix}paper{
		flex:1;
	}
	.layout-panel{
		height: 100%;
		width: 260px;
		overflow: hidden;
		// border-left: 2px solid @base-color;
		// padding: 4px;
		background: @base-color;
		position: relative;
		box-sizing: border-box;
		.panel:first-child{
			.panel-hd{
			}
		}
	}
	.iScrollIndicator{
		border: 1px solid rgb(108, 111, 79) !important;
		background: rgb(134, 154, 150) !important;
	}
}
.panel-theme-emi{
	width:auto;
	box-shadow: none;
	border-radius:0;
	border-top: 1px dashed #727e7c;
    padding-top: 1px;
	.panel-hd{
		line-height: 24px;
		height: 24px;
		background: #717d7b;
		color: #cbe0dc;
		// border-radius: none;
		&:hover {
			cursor: default;
		}
	}
	.panel-bd{
		background: none;
	}
	.text-input{
		
	}
}
.x-input{
	overflow: hidden;
	position: relative;
	&:nth-child(1){
		flex: 4
	}
	&:nth-child(3){
		flex: 5
	}
	.unit{
		color: #353a39;
		position: absolute;
		top: 0;
		right:5px;
		font-size: 12px;
		line-height: 18px;
	}
}
.panel{
    .toggle-list{
        .clearFix();
    }
    .toggle-item{
        float: left;
        line-height: 20px;
        background: @itemBg;
        margin-right: 5px;
        padding: 0 5px;
        border-radius: 3px;
        margin-bottom: 3px;
        cursor: pointer;
        color: @TextWhite;
        &.active{
            background: @emBgColor;
            color: @TextBlack;
        }
    }
}
.license-dialog{
	.fr,.right{
		float: right;
	}
}
.user-config{
	position: absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:10002;
	background: @secondary-color;
	.l-editor{
		width:100%;
		height: 100%;
		background: none;
		border:none;
		color:@TextWhite;
		&:active,&:focus{
			outline: none;
		}
	}
}
@import "./parts/panel-attribute.less";
@import "./parts/panel-mode.less";
@import "./parts/panel-style.less";
@import "./parts/panel-selector.less";
@import "./parts/panel-text.less";
@import "./parts/panel-tag.less";